// 20之内的数
<template>
	<view class="content">
		<custom-navigation :title="title" rightTxt="重新开始"  leftTxt="显示参考" @leftAction="showTishi=!showTishi"  @rightAction="init()"></custom-navigation>
		<view class="hr"></view>
		<!-- <view class="text-area">
			<text class="title">10之内的加法</text>
		</view> -->
		<view class="error-count" v-if="errorCount"> 
			错题数:<text>{{errorCount}}</text>
		</view> 
		<h5 v-if="answer.length">剩余问题个数:{{answer.length}}</h5>
		<h5 v-else>问题已全部答完!</h5>




		<view class="box">
			<view class="line">
				<view class="flex1">读汉字:</view>
				<view class="flex1 hanzi" style="color:red;font-size:60px;">
					<view v-if="showTishi" style="color:red;font-size:40px;" class="pinyin" @click="play(item.key)">
						{{item.pinyin}}
					</view>
					<view @click="play(item.key)">
						{{item.key}}
					</view>
				</view>
				<view class="flex1" >
					<button type="primary" @click="play(item.key)">发音</button>
				</view>
			</view>

			<view class="line">
				<view class="flex2">{{showTishi?'答案参考如下:':''}}</view>
				<view class="flex1">
					<button type="primary" @click="next_item()">下一个汉字</button>
				</view>
			</view>

			<view v-if="showTishi" class="line">
				<image class="flex1" src="/static/yinianji01.jpg" mode="widthFix"></image>
			</view>

		</view>



		<!-- <table v-if="item!==''">
			<tr>
				<td>请读汉字:</td>
				<td colspan="1" style="width: 150px;color:red;font-size:60px;">{{item}}</td>
				<td colspan="1">
					<button type="primary" @click="next_item()">发音</button>
				</td>
			</tr>
			<tr>
				<td td colspan="2" >{{showTishi?'答案参考如下:':''}}</td>
				<td colspan="2">
					<button type="primary" @click="next_item()">下一个汉字</button>
				</td>
			</tr>
			<tr v-if="showTishi">
				<td td colspan="6">
					<image  style="width: 98vw;" src="/static/yinianji01.jpg" mode="widthFix"></image>
				</td>
			</tr>
		</table> -->
	</view>
</template>

<script>
	import customNavigation from "@/components/custom-navigation/custom-navigation.vue";
	export default {
		components: {
			customNavigation
		},
		data() {
			return {
				title: '20之内的数字',
				data1:[],
				data1_del:[],
				item:null,
				answer:[],
				errorCount:0,
				showTishi:false,
				// https://mp.weixin.qq.com/s?__biz=MzI0MDYxNjMyMw==&mid=2247548717&idx=7&sn=be463ac00711a8ad4726d868b6a94dd8&chksm=e91a69c1de6de0d71e00e9298071e765e10802be3331dd7f922149ebae33bebbab1a68626d81&scene=27
			}
		},
		onLoad() {
			// 操作数据
			this.init();
			// console.error('this.data1:',JSON.stringify(this.data1))
		},
		onReady() {
			// setTimeout(()=> {this.init();}, 3000);
			this.init()
		},
		methods: {
			// sendPost(){
			// 	// axios.post('http://api.wetools.com/tool/hanzi', {
			// 	// 	hanzi: '快',
			// 	// 	with_seperator: 1, // 结果以空格分开
			// 	// 	first_letter_uppercase: 1, // 拼音首字母大写
			// 	// 	with_tone: 0,//给拼音加上声调
			// 	// })
			// 	// .then(function (response) {
			// 	// 	console.log(response);
			// 	// })
			// 	// .catch(function (error) {
			// 	// 	console.log(error);
			// 	// });


			// 	// this.$apiPost("http://api.wetools.com/tool/hanzi", {
			// 	// 	hanzi: '快',
			// 	// 	with_seperator: 1, // 结果以空格分开
			// 	// 	first_letter_uppercase: 1, // 拼音首字母大写
			// 	// 	with_tone: 0,//给拼音加上声
			// 	// }).then(res => {
					
			// 	// })



			// 	uni.request({
			// 		url: '/tool/hanzi', //仅为示例，并非真实接口地址。
			// 		// method:'POST',
			// 		dataType: 'json',
			// 		data: {
			// 			hanzi: '快',
			// 			with_seperator: 1, // 结果以空格分开
			// 			first_letter_uppercase: 1, // 拼音首字母大写
			// 			with_tone: 0,//给拼音加上声
			// 		},
			// 		header: {
			// 			'content-type': 'application/json',
			// 			"accept": "application/json, text/javascript, */*; q=0.01",
			// 			"accept-language": "zh-CN,zh;q=0.9",
			// 			"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
			// 		},
			// 		"referrer": "http://www.wetools.com/",
			// 		"referrerPolicy": "strict-origin-when-cross-origin",
			// 		"body": "hanzi=%E5%BF%AB&with_seperator=1&first_letter_uppercase=1&with_tone=0",
			// 		"method": "POST",
			// 		"mode": "cors",
			// 		"credentials": "include",
			// 		success: (res) => {
			// 			console.log(res.data);
			// 			this.text = 'request success';
			// 		}
			// 	});
			// },

			play(text){
				// http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=4&text=你好啊，听起来好憨啊"
				// https://fanyi.sogou.com/reventondc/synthesis?text=a&speed=1&lang=zh-CHS&from=translateweb&speaker=6
				// new Audio("http://tts.youdao.com/fanyivoice?word=你好，我是你好&le=zh&keyfrom=speaker-target").play();

				new Audio("http://tts.youdao.com/fanyivoice?word="+text+"&le=zh&keyfrom=speaker-target").play();
			},
			init(){
				this.errorCount = 0;
				try {
					const pages = getCurrentPages()
					const page = pages[pages.length - 1]
					this.title = page.$holder.navigationBar.titleText;
				} catch (error) {
					
				}
				this.item=null;
				let answer = [];
				let str='天地人你我他一二三四五上下口耳目手足站坐日月水火山石田禾对云雨风花鸟虫六七八九十爸妈马土不画打棋鸡字词语句子桌纸文数学音乐妹奶小桥台雪儿白草家是车路灯走秋气了树叶片大飞会个的船两头在里看见闪星江南可采莲鱼东西北尖说春青蛙夏弯皮地冬男女开关正反远有色近听无声去还来多少黄牛只猫边鸭苹果杏桃书包尺作业本笔刀课早校明力尘从众双木林森条心升国旗中红歌起么美丽立午晚昨今年影前后黑狗左右它好朋友比尾巴谁长短把伞兔最公写诗点要过给当串们以成数彩半空问到方没更绿出长睡那海真老师吗同什才亮时候觉得自己很穿衣服门快蓝又笑着向和贝娃挂活金哥姐弟叔爷群竹牙用几步为参加洞着乌鸦处找办旁许法放进高住孩玩吧发芽爬呀久回全变工厂医院生'
				let str2='tiān dì rén nǐ wǒ tā yī èr sān sì wǔ shàng xià kǒu ěr mù shǒu zú zhàn zuò rì yuè shuǐ huǒ shān shí tián hé duì yún yǔ fēng huā niǎo chóng liù qī bā jiǔ shí bà mā mǎ tǔ bù huà dǎ qí jī zì cí yǔ jù zi zhuō zhǐ wén shù xué yīn yuè mèi nǎi xiǎo qiáo tái xuě ér bái cǎo jiā shì chē lù dēng zǒu qiū qì le shù yè piàn dà fēi huì gè de chuán liǎng tóu zài lǐ kàn jiàn shǎn xīng jiāng nán kě cǎi lián yú dōng xī běi jiān shuō chūn qīng wā xià wān pí dì dōng nán nǚ kāi guān zhèng fǎn yuǎn yǒu sè jìn tīng wú shēng qù hái lái duō shǎo huáng níu zhī māo biān yā píng guǒ xìng táo shū bāo chǐ zuò yè běn bǐ dāo kè zǎo xiào míng lì chén cóng zhòng shuāng mù lín sēn tiáo xīn shēng guó qí zhōng hóng gē qǐ me měi lì lì wǔ wǎn zuó jīn nián yǐng qián hòu hēi gǒu zuǒ yòu tā hǎo péng you bǐ wěi bā shuí cháng duǎn bǎ sǎn tù zuì gōng xiě shī diǎn yào guò gěi dāng chuàn men yǐ chéng shù cǎi bàn kōng wèn dào fāng méi gèng lǜ chū zhǎng shuì nà hǎi zhēn lǎo shī ma tóng shén cái liàng shí hòu jué de zì jǐ hěn chuān yī fu mén kuài lán yòu xiào zhe xiàng hé bèi wá guà huó jīn gē jiě dì shū yé qún zhú yá yòng jǐ bù wèi cān jiā dòng zhe wū yā chù zhǎo bàn páng xǔ fǎ fàng jìn gāo zhù hái wán ba fā yá pá ya jiǔ huí quán biàn gōng chǎng yī yuàn shēng';
				let str2_arr = str2.split(' ');
				for (var i = 0; i < str.length; i++) {
					answer.push({key:str[i],pinyin:str2_arr[i]});
				}
				const randomArr = (arr) => {
				  for (let i = 0; i < arr.length; i++) {
				    const randomIndex = Math.round(Math.random() * (arr.length - 1 - i)) + i;
				    [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]]
				  }
				  return arr
				};
				this.answer = randomArr(answer);
				this.data1 = [];
				for (var i = 20; i >= 0; i--) {
					this.data1.unshift({key:i,status:'',res:''});
				}
				this.next_item();
				this.$forceUpdate();
			},
			request(val,index){
				if(!this.item.status){
					this.set_status(this.item.key,val,index);
				}
			},
			//设置答案
			set_status(key,val,index){
				// console.error({key,val})
				for (var i = 0; i < this.data1.length; i++) {
					const item = this.data1[i];
					if(key == item.key){
						if(eval(key) == val){
							item.res = val;
							item.status = '正确';
							this.data1_del.push(item);
							this.answer.splice(index,1);
							// this.data1.splice(i,1);
							// i--;
							// continue;
							// setTimeout(()=> {this.next_item()}, 1000);
						} else {
							item.res = val;
							item.status = '错误';
							this.errorCount++;
							// setTimeout(()=> {this.next_item()}, 1000);
						}
					}
				}
			},
			// 获取剩下的随即值
			get_item(){
				let i = parseInt(Math.random()*100000);
				i = i%this.data1.length;
				if(this.data1[i]){
					this.data1[i].res='';
					this.data1[i].status='';
					this.item = this.data1[i];
				}
			},
			// 获取剩下的随即值
			next_item(){
				// if(this.item){
				// 	if(this.item.status == '正确'){
				// 		for (var i = 0; i < this.data1.length; i++) {
				// 			if(this.data1[i].key == this.item.key) {
				// 				if(this.data1[i+1]){
				// 					this.item = this.data1[i+1];
				// 					break;	
				// 				}
				// 			}
				// 		}
				// 	} else {
				// 		this.item.status ='';
				// 		this.item.res ='';
				// 	}
				// } else {
					if(this.answer.length){
						this.item = this.answer[0];
						 this.answer.splice(0,1);
					}
				// }
				
				// this.set_status(this.answer[0],this.answer[0],0)();
			}
		}
	}
</script>

<style>
	.hanzi{
		width: 100%;
		text-align: center;
	}
	.tupian{
	}
	.box{
		width: 90vw;
		display: flex;
		flex-direction: column;
		margin: 30px;
	}
	.line{
		display: flex;
		flex-direction: row;
		margin-top: 10px;
		justify-content:center;
	}
	table{
		margin-left: 10px;
		margin-right: 10px;
	}
	.tcenter{
		text-align: center;
		width: 100%;
		/* border-bottom: 1px solid #8f8f94; */
	}
	.content{
		font-size: 30px;
	}
	.list{
		/* border: 1px solid #8f8f94; */
		width: auto;
		height: 70vh;
		/* display: flex; */
		flex-direction: column;
		flex: 1;
		overflow:scroll;
	}
	.inline1{
		display: inline;
	}
	.inline2{
		display: inline-block;
		width: 48%;
		margin: 3px;
		background-color: bisque;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
